/**
 *
 *  zhx-ring-buttons scss
 *  Author: Vicco Wang
 *  Date: 2016-09-26
 * 
 */
$bgRed    : #E91E63;
$bgBlue   : #03A9F4;
$bgGreen  : #009688;
$bgNormal : #E0E0E0;

$lightenColor : #fff;
$darkenColor  : #212121;


@mixin frame-transition($wt: all, $sec: .3s) {
  -webkit-transition: $wt $sec ease 0s;
  -moz-transition: $wt $sec ease 0s;
  transition: $wt $sec ease 0s;
}

@mixin no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@mixin use-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex-align-center {
  -webkit-align-items: center;
  -webkit-justify-content: center;
  align-items: center;
  justify-content: center;
}

@mixin flex-column {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.zhx-ring-btn-wrap{
	position:fixed;
  z-index:1000;
	width:1px;height:1px;
}
.zhx-ring-btn{
	position:fixed;
	@include use-flex;
	@include flex-align-center;
	@include no-select;
	z-index:999;
  background-color : lighten( $bgNormal, 10% );
  opacity: 0;
  font-size:1.6em !important;
  font-weight:normal;
	// background-color:#E91E63;
	border-radius:500px;
	cursor:default;
	box-shadow:0 5px 10px lighten( $darkenColor, 40% );
  // transform:rotateY(180deg);
  // -ms-transform:rotateY(180deg);
  // -moz-transform:rotateY(180deg); 
  // -webkit-transform:rotateY(180deg);
  // -o-transform:rotateY(180deg);
	// -webkit-transition:all .2s ease-in-out 0s;

  &.green{ color : #4CAF50 }
  &.purple{ color : #673AB7 }
  &.orange{ color : #FFC107 }
  &.darkOrange{ color : #FF9800 }
  &.darkBlue{ color : #01579B }
  &.lightBlue{ color : #00BCD4 }
  &.flyBlue { color : #2196F3 }
  &.gray{ color : #607D8B }

}

.zhx-ring-bg-normal{
  background-color : $bgNormal;
  color : $darkenColor;
}
.zhx-ring-bg-red{
  background-color : $bgRed;
  color : $lightenColor;
}
.zhx-ring-bg-blue{
  background-color : $bgBlue;
  color : $lightenColor;
}
.zhx-ring-bg-green{
  background-color : $bgGreen;
  color: $lightenColor;
}

.hidden-body{
  overflow:hidden;
}

#zhx-ring-button-mask{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  background-color: $darkenColor;
  opacity: .2;
  z-index:998;
}



